<template>
    <div class="loginByPsw">
        <div class="title">密码登录</div>
        <div class="form">
            <van-form>
                <van-cell-group inset>
                    <van-field
                        v-model="username"
                        clearable
                        placeholder="手机/用户名"
                    />
                    <van-field
                        v-model="password"
                        clearable
                        :type="isVisible?'':'password'"
                        name="密码"
                        placeholder="密码"
                        :right-icon="isVisible?'eye-o':'closed-eye'"
                        @click-right-icon="(isVisible = !isVisible)"
                        autocomplete
                    ></van-field>
                </van-cell-group>
                <div style="margin: 16px 0;" class="btnLogin">
                    <van-button 
                        round 
                        block 
                        :color="(username.length>0&&password.length>0)?'rgb(2, 182, 253)':'rgba(0, 0, 0, 0.1)'" 
                        :disabled="(username.length>0&&password.length>0)?false:true"
                        @click="onLogin"
                    >登录</van-button>
                </div>
                <div>
                    <a href="/#/settings/resetPsw">忘记密码</a>
                </div>
            </van-form>
        </div>
        <div class="footer">
            <van-field name="checkbox" class="agreement">
                <template #input>
                    <van-checkbox v-model="checked" shape="circle">
                        已阅读并同意
                        <a href="javascript:void(0)">《用户服务协议》</a>、
                        <a href="javascript:void(0)">《隐私政策》</a>
                    </van-checkbox>
                </template>
            </van-field>
        </div>
        <!-- Popup -->
        <checkAgreePrompt
            :showPopup="showPopup"
            :msgPopup="msgPopup"
            @on-disagree="onDisagree"
            @on-agree="onAgree"
        ></checkAgreePrompt>
    </div>
</template>

<script>
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { reactive, ref } from 'vue';
import {login} from '@/api/user';
import checkAgreePrompt from './checkAgreePrompt.vue';
export default {
    name:'loginByPsw',
    setup() {
        const store = useStore();
        const router = useRouter();
        
        const username = ref('');
        const password = ref('');
        // 格式化函数 去除非数字的输入
        const formatter = (value) => value.replace(/\D/gi,'');
        const isVisible = ref(false) // 密码是否可见
        const checked = ref(false);  // 协议是否勾选
        // 登录反馈弹窗  
        const showPopup = ref(false);       
        const msgPopup = reactive({
            status:false,
            message:''
        });
        // 点击登录
        const onLogin = () => {
            if(checked.value){
                msgPopup.status = true;
                login({
                    type:'psw',
                    username:username.value,
                    password:password.value
                }).then((res)=>{
                    console.log(res);
                    if(res.code == '1103'){
                        console.log(res.message);
                        msgPopup.status = true;
                        msgPopup.message = res.message;
                        setTimeout(() => {
                            msgPopup.status = false;
                        }, 1000);
                    }
                    if(res.code == '1200' || res.code == '1100'){
                        console.log(res.message);
                        store.commit('SET_TOKEN',JSON.stringify(res.data));
                        localStorage.setItem('token',JSON.stringify(res.data));
                        store.commit('SET_USERNAME',res.data.username);
                        localStorage.setItem('username',res.data.username);
                        store.commit('SET_ID',res.data._id);
                        localStorage.setItem('userId',res.data._id);
                        store.commit('SET_USER',res.data);

                        msgPopup.status = true;
                        msgPopup.message = 'loading';
                        setTimeout(() => {
                            msgPopup.status = false;
                            // history.back();
                            router.back();
                        }, 1000);
                    }
                }).catch((error)=>{
                    console.log(error);
                })
            }
            else{
                showPopup.value = true;
            }
        };
        // 同意
        const onAgree = () => {
            checked.value = true;
            showPopup.value = false;
            onLogin();
        }
        // 不同意
        const onDisagree = () => {showPopup.value = false;}
        return {
            username,
            password,
            formatter,
            isVisible,
            checked,
            showPopup,
            msgPopup,
            onLogin,
            onAgree,
            onDisagree,
        };
    },
    components:{
        checkAgreePrompt
    }
}
</script>

<style>
.loginByPsw{
    width: 100%;
    box-sizing: border-box;
    padding: 0 25px;
    display: flex;
    flex-direction: column;
}
.loginByPsw .title{
    margin: 25px 0;
    font-size: 1.625rem;
    font-weight: bold;
}
.loginByPsw .form{
    margin-top: 30px;
}
.loginByPsw .form .van-cell-group{
    margin: 0 0 20px;
    border-bottom: 1px solid #f4f4f4;
    border-radius: 0;
}
.loginByPsw .form .van-cell-group .van-cell{
    padding: 10px 0;
}
.loginByPsw .form .van-cell-group .van-cell:after{
    right: 0;
    left: 0;
}
.loginByPsw .form .van-cell-group input{
    height: 30px;
    font-size: 18px;
    caret-color: #02b6fd;
}
.loginByPsw .form .btnLogin .van-button{border: 0;}

.loginByPsw .form .agreement{
    margin-top: 15px;
    padding: 0;
    font-size: 0.625rem;
    color: #a2a2a2;
}
.loginByPsw .form .agreement .van-checkbox{
    margin: 0;
    align-items: flex-start;
}
.loginByPsw .form .agreement .van-checkbox .van-checkbox__icon{
    height: 0.625rem;
}
.van-checkbox__icon{margin-top: 3px;}
.van-checkbox__icon .van-icon{
    border-radius: 50%;
    width: 0.875rem;
    height: 0.875rem;
    line-height: 1.23;
    font-size: 0.625rem;
}
.van-checkbox__icon--checked .van-icon{
    background-color: #02b6fd;
    border-color: #02b6fd;
}

.loginByPsw .footer{
    margin-bottom: 20px;
    padding: 0 25px;
    box-sizing: border-box;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.loginByPsw .footer .agreement{
    margin: 15px 0;
    padding: 0;
    font-size: 0.875rem;
    color: #aaa;
}
.loginByPsw .footer .agreement .van-checkbox{
    margin: 0;
    align-items: flex-start;
}
.loginByPsw .footer .agreement .van-checkbox .van-checkbox__icon{
    height: 0.625rem;
}
.loginByPsw .footer .agreement .van-checkbox__icon .van-icon{
    border-radius: 50%;
    width: 0.875rem;
    height: 0.875rem;
    line-height: 1.23;
    font-size: 0.625rem;
}
.loginByPsw .footer .agreement .van-checkbox__icon--checked .van-icon{
    background-color: #02b6fd;
    border-color: #02b6fd;
}
/* 弹出框 */
.popLoginRes{
    padding: 25px;
    border-radius: 0.875rem;
    background: rgba(255,255,255,0.3);
    color: #fff;
}
</style>